<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class与style绑定</title>
	</head>
	<body>
		<div id="app">
			<h1>绑定HTML Class</h1>
			<h2 class="static" v-bind:class="{active:isActive, 'text-danger':hasError}">对象语法1</h2>
			<h2 v-bind:class="classObject">对象语法2</h2>
			
			<h2 v-bind:class="[activeClass, errorClass]">数组语法</h2>
			<h2 >用在组件上</h2>
			<my-componet class="baz boo" v-bind:class="{active:hasError}"></my-componet>
			
			<h1>绑定内联样式</h1>
			<h2 v-bind:style="{color:activeColor, fontSize:fontSize+'px'}">对象语法</h2>
			<h2 v-bind:style="styleObject">样式对象</h2>
			<h2 v-bind:style="[styleObject, styleObject1]">数组语法</h2>
			<h2>自动添加前缀</h2>
			<h2>多重值</h2>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		Vue.component('my-componet',{
			template:'<p class="foo bar">Hi</p>'
		});
		var vm = new Vue({
			el:'#app',
			data:{
				activeColor:'red',
				fontSize:30,
				isActive:false,
				hasError:true,
				error:null,
				classObject:{
					active:true,
					'text-danger':true,	
				},
				styleObject:{
					color:'red',
					fontSize:'30px',
				},
				styleObject1:{
					background:'gray',
					padding:'10px',
				},
				activeClass:'active',
				errorClass:'text-danger',
			},
			computed:{
				classObject2:function(){
					return {
						active:this.isActive && !this.error,
						'text-danger':this.error && this.error.type === 'fatal',
					}
				}
			}
		})
	</script>
</html>